/* 一像素下边框 */
bottom-border-1px($color)
  position relative
  border none
  &::after
    content ''
    position absolute
    left 0
    bottom 0
    z-index 999
    width 100%
    height 1px
    background-color $color
    transform scaleY(.5)

/* 一像素上边框 */
top-border-1px($color)
  position relative
  &::before
    content ''
    position absolute
    z-index 999
    left 0
    top 0
    width 100%
    height 1px
    background-color $color
    transform scaleY(.5)
/* 一像素左边框 */
left-border-1px($color)
  position relative
  &::before
    content ''
    position absolute
    z-index 999
    left 0
    top 0
    width 1px
    height 100%
    background-color $color
    transform scaleX(.5)
/* 一像素右边框 */
right-border-1px($color)
  position relative
  &::before
    content ''
    position absolute
    z-index 999
    right 0
    top 0
    width 1px
    height 100%
    background-color $color
    transform scaleX(.5)

/* 所有用到1px minxin的选择器需要加上`.border-1px`来进行媒体查询  */
@media only screen and (-webkit-device-pixel-ratio: 2)
  .border-1px
    &::before
      transform scaleY(.5)

@media only screen and (-webkit-device-pixel-ratio: 3)
  .border-1px
    &::before
      transform scaleY(.333333)

/* 根据像素比来使用 2x图 3x图 */
bg-image($url)
  background-image url($url + '@2x.png')
  @media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3)
    background-image url($url + '@3x.png')

/* 清除浮动 */
clearFix()
  &::after
    content ''
    display block
    clear both
    overflow hidden
    visibility hidden
    height 0
    
/* 显示省略号 */
ellipsis()
  overflow hidden
  text-overflow ellipsis
  white-space nowrap

/* 水平垂直居中 (父级需要设置定位) */
positionCenter()
  position absolute
  left 50%
  top 50%
  transform translate(-50%, -50%)

/* flex 水平垂直居中 */
flexCenter()
  display flex
  justify-content center
  align-items center
  flex-direction column